<template>
    <div>
      <Header></Header>
      <swiper :swiperlist='swiperlist'></swiper>
      <Icon :iconlist='iconlist'></Icon>
      <Recommend :recommend='recommend'></Recommend>
      <Webrecommend  :weeklist='weeklist'></Webrecommend>
    </div>
</template>

<script>
import Header from './components/Header'
import Swiper from './components/Swiper'
import Icon from './components/Icon'
import Recommend from './components/Recommend'
import Webrecommend from './components/Webrecommend'
import axios from 'axios'
import { mapState } from 'vuex'
export default {
  name: 'home',
  components: {
    Header,
    Swiper,
    Icon,
    Recommend,
    Webrecommend
  },
  computed: {
    ...mapState(['city'])
  },
  data () {
    return {
      swiperlist: [],
      iconlist: [],
      recommend: [],
      weeklist: [],
      citys: ''
    }
  },
  methods: {
    getdata () {
      axios.get('/api/index.json')
        .then(this.getsucc)
    },
    getsucc (ref) {
      const cba = ref.data
      const data = cba.data
      this.swiperlist = data.swiperList
      this.iconlist = data.iconList
      this.recommend = data.recommendList
      this.weeklist = data.weekendList
    }
  },
  mounted () {
    this.citys = this.city
    this.getdata()
  },
  activated () {
    if (this.citys !== this.city) {
      this.getdata()
      this.citys = this.city
    }
  }
}
</script>

<style>

</style>
